﻿
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1.0, user-scalable=no">
    <title></title>

    <link rel="stylesheet" href="../css/canvas.css">
</head>
<body>

    <div class="canvasDiv">
        <div id="editing_area">
            <canvas id="canvasEdit"></canvas>
        </div>
    </div>


    <div class="imgDiv">
        <span id="sign_show"></span>
    </div>

    <div class="btnDiv">
        <a id="sign_clear" class="clearBtn"><img src="../img/xpc.png" class="clear_rx"></span></a >
      <!--   <a id="sign_ok" class="okBtn">确认</a> -->
    </div>
    <input type="hidden" value="" id="canvas_imgbox">
    <script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript">
    $(function(){
        //初始化动作，根据DOM的ID不同进行自定义，如果不写则内部默认取这四个
        $().esign("canvasEdit", "sign_show", "sign_clear", "sign_ok");
    });
</script>
<script type="text/javascript">
    var h_can =$(".canvasDiv").height()
    var w_can =$(".canvasDiv").width()
    var win_h=$(window).height()
    $("#canvasEdit").width(w_can)
    $("#canvasEdit").height(win_h-45)
    $(".canvasDiv").height(win_h-45)



    (function (root, doc, factory) {
        //根据加载方式不同，载入jQuery（根据你的requie命名自定义修改）
        if (typeof define === "function" && define.amd) {
            define( ["jquery"], function ($) {
                return factory($);
            });
        } else {
            factory(root.jQuery);
        }
    }(this, document, function($) {
        $.fn.esign = function(canvasEdit, sign_show, sign_clear, sign_ok) {

            //初始化相关DOM，获得结果寄存命名空间
            var domMap = domInit(canvasEdit, sign_show, sign_clear, sign_ok);
            //获取画板引用
            var canvas = domMap.canvasEdit[0];
            //注册相关事件
            if (typeof document.ontouchstart != "undefined") {      //适配移动设备
                canvas.addEventListener('touchmove', onMouseMove, false);
                canvas.addEventListener('touchstart', onMouseDown, false);
                canvas.addEventListener('touchend', onMouseUp, false);
            } else {      //适配电脑
                canvas.addEventListener('mousemove', onMouseMove, false);
                canvas.addEventListener('mousedown', onMouseDown, false);
                canvas.addEventListener('mouseup', onMouseUp, false);
                canvas.addEventListener('mouseleave', onMouseUp, false);
            }
            //初始化上下文和参数
            var context = canvas.getContext('2d');
            var linex = new Array();
            var liney = new Array();
            var linen = new Array();
            var lastX = 1;
            var lastY = 30;
            var flag = 0;

            //注册按钮相关事件
            domMap.sign_ok.on("click",function(){
                //preview();
                //rewrite();
            });

            domMap.sign_clear.click(function(){
                clearImg();
                rewrite();
            });

            /*
             *方法声明
             */

            //相关DOM初始化动作，如果不传入则使用查找默认ID
            function domInit(canvasEdit, sign_show, sign_clear, sign_ok){
                var domMap = {};

                if(!canvasEdit){
                    domMap.canvasEdit = $("#canvasEdit");
                } else{
                    domMap.canvasEdit = $("#" + canvasEdit);
                }

                if(!sign_show){
                    domMap.sign_show = $("#sign_show");
                } else{
                    domMap.sign_show = $("#" + sign_show);
                }

                if(!sign_clear){
                    domMap.sign_clear = $("#sign_clear");
                } else{
                    domMap.sign_clear = $("#" + sign_clear);
                }

                if(!sign_ok){
                    domMap.sign_ok = $("#sign_ok");
                } else{
                    domMap.sign_ok = $("#" + sign_ok);
                }

                return domMap;
            }

            //根据鼠标坐标获取绘图坐标
            function getCanvasPos(canvas, evt) {
                var rect = canvas.getBoundingClientRect();
                var x, y;
                if (evt.targetTouches) {
                    x = evt.targetTouches[0].clientX;
                    y = evt.targetTouches[0].clientY;
                } else {
                    x = evt.clientX;
                    y = evt.clientY;
                }
                return {
                    x: (x - rect.left) * (canvas.width / rect.width),
                    y: (y - rect.top) * (canvas.height / rect.height)
                }
            }

            //鼠标移动的时候
            function onMouseMove(evt)
            {
                var x = getCanvasPos(canvas, evt).x,
                        y = getCanvasPos(canvas, evt).y;

                //判断是否处于按下状态
                if (flag == 1) {
                    //如果是则画图
                    linex.push(x);
                    liney.push(y);
                    linen.push(1);
                    context.save();
                    context.translate(context.canvas.width / 1, context.canvas.height / 2);
                    context.translate(-context.canvas.width / 1 , -context.canvas.height/2);
                    context.beginPath();
                    context.lineWidth = 2;
                    for (var i = 1; i < linex.length; i++) {
                        lastX = linex[i];
                        lastY = liney[i];
                        if (linen[i] == 0)
                            context.moveTo(lastX, lastY);
                        else
                            context.lineTo(lastX, lastY);
                    }
                    context.shadowBlur = 10;
                    context.stroke();
                    context.restore();
                }
                evt.preventDefault();
                preview()
            }

            //当鼠标按下的时候修改按下标志，并开始记录坐标
            function onMouseDown(evt) {
                var x = getCanvasPos(canvas, evt).x,
                        y = getCanvasPos(canvas, evt).y;
                flag = 1;
                linex.push(x);
                liney.push(y);
                linen.push(0);
            }

            //鼠标松开清除标志
            function onMouseUp() {
                flag = 0;
            }

            //清空绘制区域
            function rewrite(){
                linex = new Array();
                liney = new Array();
                linen = new Array();
                context.clearRect(0, 0, canvas.width, canvas.height);
            }

            //清理已生成照片
            function clearImg(){
                domMap.sign_show[0].innerHTML = "";
                $("#canvas_imgbox").val("")

            }

            //填充生成的图片
            function preview(){
                var show = domMap.sign_show[0];
                show.innerHTML = "";
                show.appendChild(convertCanvasToImage(canvas));

            }

            //生成签字图片，图片大小自行修改
            function convertCanvasToImage(canvas){
                var image = new Image();
                image.width = 120;
                image.height = 50;
                image.src = canvas.toDataURL("i/png");
                $("#canvas_imgbox").val(image.src)
                var v = window.parent.document.getElementById("hotelDzqm");
                var c = window.parent.document.getElementById("canvas1");
                var $v = $(v);
                var $c = $(c);
                $v.val(image.src);
                $c.attr("src", image.src);
                return image;
            }
        };
        return $.fn.esign;


    }));


    // $(".okBtn").click(function(){
    //        var img=$("#imgDiv img").src
    //       var a=$("#canvas_imgbox").val()
    //       //var iframeBox=window.parent.document.getElementById("iframebox1");

    //       var iii=parent.$("#ad1aa").val();
    //      //var tin= iframeBox.attr("id")
    //       alert(iii)
    //    })




</script>
</body>
</html>